<template>
	<view>
		<!-- 头部 -->
		<u-sticky>
			<view class="dingbu mainpadding2">
				<view class="" :style="{paddingTop:menutop+'rpx'}">
					<view class="flexleft">
						<view class="margin_right2" @click="fhsyy">
							<u-icon name="arrow-left" color="#999999" size="24"></u-icon>
						</view>
						<view class="flexbetween ssbox1" style="width: 450rpx;box-sizing: border-box;">
							<view class="flexleft">
								<u-icon name="search" color="#999999" size="20"></u-icon>
								<input type="text" placeholder="请输入搜索内容" class="hei_text main_size bold" v-model="keywords" confirm-type="search" @confirm="init">
							</view>
							<view class="rightss" @click="init">搜索</view>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<!-- 所有内容 -->
		<view class="mainpadding">
			<view class="flexbetween">
				<view class="flexleft" @click="zonghe">
					<view class="strongtext xiaohei nofonweight margin_right1" v-if="zh_sort==0">综合排序</view>
					<view class="strongtext xiaohong nofonweight margin_right1" v-if="zh_sort==1">综合排序</view>
					<view class="strongtext xiaohong nofonweight margin_right1" v-if="zh_sort==2">新品优先</view>
					<view class="">
						<u-icon name="arrow-down" color="#C01933" size="14" v-if="zh_sort==1 || zh_sort==2"></u-icon>
						<u-icon name="arrow-down" color="#999999" size="14" v-if="zh_sort==0"></u-icon>
					</view>
				</view>
				<view class="flexleft" @click="xiaoliang">
					<view class="strongtext  nofonweight margin_right1" :class="sale_sort==1?'xiaohong':'xiaohei'">销量</view>
					<!-- <view class="">
						<u-icon name="arrow-down" color="#C01933" size="14"></u-icon>
					</view> -->
				</view>
				<view class="flexleft" @click="jiage">
					<view class="strongtext  nofonweight margin_right1" :class="(price_sort==1||price_sort==2)?'xiaohong':'xiaohei'">价格</view>
					<view class="">
						<view class="">
							<u-icon name="arrow-up" v-if="price_sort==1" color="#C01933" size="10"></u-icon>
							<u-icon name="arrow-up" v-else color="#999999" size="10"></u-icon>
						</view>
						<view class="">
							<u-icon name="arrow-down" v-if="price_sort==2" color="#C01933" size="10"></u-icon>
							<u-icon name="arrow-down" v-else color="#999999" size="10"></u-icon>
						</view>
					</view>
					
				</view>
			</view>
			<!-- 商品列表 -->
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage" style="margin-top: 300rpx;"></view>
			</view>
			<view class="flexbetween flex_wrap">
				<view class="spbox margin_top dingwei" v-for="item in list.data" :key="item.Rec" @click="tzspxq(item.Rec)">
					<!-- <view class="jianth"></view> -->
					<view class="shangpt">
						<image :src="item.image_text" mode=""></image>
					</view>
					<view class="huisebox ">
						<view class="sanshier xiaohei fonweight yhxk">{{item.FullName}}</view>
						<view class="flexbetween margin_top1">
							<view class="strongtext xiaohong ">月销量{{item.mouthsales}}</view>
							<view class="strongtext xiaohui ">库存 {{item.stock}}</view>
						</view>
						<view class="strongtext xiaohei yhxk margin_top1" v-if="item.comment_des">最新评价：{{item.comment_des}}</view>
					</view>
					<view class="fensbox ">
						<view class="strongtext xiaoka nofonweight">成本补贴价
							<text class="strongtext xiaoka fonweight">￥{{item.vipprice}}</text>
						</view>
						<!-- <view class="flexbetween margin_top1">
							<view class="smalltext xiaoka nofonweight ">厂商指导价
								<text class="smalltext xiaoka fonweight">￥{{item.RetailStdPrice}}</text>
							</view>
							<view class="smalltext xiaoka nofonweight  textright">可省
								<text class="smalltext xiaohong fonweight">{{item.zjPrice}}元</text>
							</view>
						</view> -->
						<view class="">
							<view class=" margin_top1 smalltext xiaoka nofonweight ">厂商指导价
								<text class="smalltext xiaoka fonweight textright">￥{{item.RetailStdPrice}}</text>
							</view>
							
						</view>
						<view class="flexright margin_top1">
							<view class=" ershil xiaoka nofonweight ">可省</view>
							<text class="xiaohong fonweight" style="font-size: 30rpx;">{{item.zjPrice}}元</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				menutop: 0,
				page:1,
				pagedown:true,
				list:{
					data:[]
				},
				zh_sort:1,//1=综合排序,2=新品优先
				sale_sort:0,//:1=销量排序
				price_sort:0,//:1=升序,2=降序
				keywords:"",
			}
		},
		onLoad(options) {
			if(options.text){
				this.keywords = options.text
			}
			this.init()
			this.menutop = uni.getMenuButtonBoundingClientRect().top * 2
		},
		methods: {
			zonghe(){
				this.zh_sort = this.zh_sort==1?2:1
				this.sale_sort = 0
				this.price_sort = 0
				this.init()
			},
			xiaoliang(){
				this.zh_sort = 0
				this.price_sort = 0
				this.sale_sort = this.sale_sort==1?0:1
				this.init()
			},
			jiage(){
				this.zh_sort = 0
				this.sale_sort = 0
				this.price_sort = this.price_sort==1?2:this.price_sort==2?0:1
				this.init()
			},
			tzspxq(id) {
				uni.navigateTo({
					url: '/pages_index/shangpxq?id='+id
				})
			},
			init(isPage, page) {
				let _this = this;
				let url = '/api/goodscl/goodsindex'
				let data = {
					page: page || 1,
					limit:12,
					zh_sort:this.zh_sort,
					sale_sort:this.sale_sort,
					price_sort:this.price_sort,
					keywords:this.keywords
				}
				httpRequest.request(url, 'GET',data, false, false, true).then(res => {
					if (res.code == 1) {
						if(res.data.length==0){
							this.pagedown = false
						}
						if (isPage == true) {
							_this.list.data = _this.list.data.concat(res.data);
						} else {
							_this.list.data = res.data;
							this.pagedown = true
							this.page = 1
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (!this.pagedown) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			// 返回上一页
			fhsyy(){
				uni.navigateBack(1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 商品列表
	.jianth {
		width: 28rpx;
		height: 38rpx;
		position: absolute;
		right: 42rpx;
		bottom: 48rpx;
		background-size: 100% 100%;
		background-image: url('../static/image/system/jiant.png');
	}

	.fensbox {
		padding: 10rpx 20rpx;
		background: #FED8D2;
		border: 0 0 20rpx 20rpx;
	}

	.huisebox {
		padding: 10rpx 20rpx;
		background: #E6E6E6;
	}

	.spbox {
		width: 48%;
	}

	.shangpt {
		height: 320rpx;
		width: 100%;
		border: 20rpx 20rpx 0 0;

		image {
			width: 100%;
			height: 100%;
			border: 20rpx 20rpx 0 0;
		}
	}

	// 结束
	.xiaohuibtn {
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
		background: #F2F2F2;
		border-radius: 23rpx 23rpx 23rpx 23rpx;
		padding: 8rpx 16rpx;
	}

	.ssbox1 {
		position: relative;
		padding: 5rpx 5rpx 5rpx 10rpx;
		border-radius: 50rpx;
		background-color: #F2F2F2;

		.rightss {
			width: 130rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #C01933;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.dingbu {
		background-color: #fed8d3;
	}
</style>